<template xmlns="http://www.w3.org/1999/html">
  <br/>
  <a-col :lg="24" style="width:100%; margin-left: 19px">
    <j-dict-select-tag placeholder="请选择主项目"
                       showSearch="true"
                       style="width:600px;"
                       v-model:value="projectIds"
                       dictCode="c_project_application,project_name,id"
                       @change="projectChange"
                       allow-clear />
  </a-col>
  <div class="p-4">
    <!--项目情况-->
    <ChartGroupCard  :projectId="projectIds" class="enter-y" :loading="loading" type="chart" />
    <br/>
    <!--快捷导航-->
    <QuickNav :projectId="projectIds" class="enter-y" :loading="loading" />
    <!--项目-->
    <SaleTabCard :projectId="projectIds" class="!my-4 enter-y" :loading="loading" />
    <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="应收应付统计">
          <div class="infoArea"> <!-- 月统计-->
            <HeadInfo title="应收合计"  :content="lineMultiDataDTO.totalTeceivables"></HeadInfo>
            <HeadInfo title="应付合计"  :content="lineMultiDataDTO.totalPayable"></HeadInfo>
            <HeadInfo title="比例" :iconColor="seriesColor" :content="lineMultiDataDTO.proportion" icon="rise"></HeadInfo>
          </div>
          <LineMulti :chartData="lineMultiDataDTO.lineMultiData" height="33vh" type="line" :option="{ legend: { top: 'bottom' } }"></LineMulti>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
  import ChartGroupCard from '../components/ChartGroupCard.vue';
  import SaleTabCard from '../components/SaleTabCard.vue';
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import HeadInfo from '/@/components/chart/HeadInfo.vue';
  import { getLoginfo, getVisitInfo } from '../api.ts';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import JDictSelectTag from '../../../../components/Form/src/jeecg/components/JDictSelectTag.vue';
import { getLineMultiData } from '@/views/common.api';
import QuickNav from '@/views/dashboard/Analysis/components/QuickNav.vue';

  const loading = ref(true);
  const { getThemeColor } = useRootSetting();

  setTimeout(() => {
    loading.value = false;
  }, 500);

  const lineMultiDataDTO = ref({});


  const ipColor = ref();
  const visitColor = ref();
  const seriesColor = ref();


  const projectIds=ref()
  onMounted(() => {
    projectIds.value = "1937357265828864002"
    getLineMultiDataData()
  });

async function projectChange(value){
    projectIds.value = value
    getLineMultiDataData()
  }
async function getLineMultiDataData(){
  const params = {'projectId':projectIds.value}
  const rest = await getLineMultiData(params)
  if(rest){
    lineMultiDataDTO.value = rest
  }
}


</script>

<style lang="less" scoped>
   .infoArea {
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    .head-info.center {
      padding: 0;
    }
    .head-info {
      min-width: 0;
    }
  }
  .circle-cust {
    position: relative;
    top: 28px;
    left: -100%;
  }

  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      font-size: 0.95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }

    p {
      line-height: 42px;
      margin: 0;

      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
  .ant-card {
    ::v-deep(.ant-card-head-title) {
      font-weight: normal;
    }
  }
</style>
